<template>
  <img class="bgImg" :src="lyric.al.picUrl" alt="" />
  <div class="detailTop">
    <div class="detailTopLeft">
      <svg class="icon" aria-hidden="true" @click="goback">
        <use xlink:href="#icon-zuojiantou"></use>
      </svg>
      <div class="leftMarquee">
        <Vue3Marquee style="color: #fff">{{ lyric.al.name }}</Vue3Marquee>
        <span v-for="item in lyric.ar" :key="item">{{ item.name }}</span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-youjiantou"></use>
        </svg>
      </div>
    </div>
    <div class="detailTopRight">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-fenxiang1"></use>
      </svg>
    </div>
  </div>
  <div class="detailContent" v-show="isLyric">
    <img
      src="@/assets/images/2.png"
      alt=""
      class="need"
      :class="{ need_active: !isShow }"
    />
    <img src="@/assets/images/3.png" alt="" class="cd" />
    <img
      :src="lyric.al.picUrl"
      alt=""
      class="pic"
      :class="{ pic_active: !isShow, pic_paused: isShow }"
    />
  </div>
  <div class="lyric">
    <p v-for="item in lyricChange" :key="item">
      {{ item.lrc }}
    </p>
  </div>
  <div class="detailFooter">
    <div class="footTop">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-logo-github"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-logo-github"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-logo-github"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-logo-github"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-logo-github"></use>
      </svg>
    </div>
    <div class="footContent">
      <div class="progress">
        <div class="bgProgress"></div>
        <div class="circle"></div>
      </div>
    </div>
    <div class="footer">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xunhuan"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-shangyishou"></use>
      </svg>
      <svg class="icon icons" aria-hidden="true" v-if="isShow" @click="play">
        <use xlink:href="#icon-bofang2"></use>
      </svg>
      <svg class="icon icons" aria-hidden="true" v-else @click="play">
        <use xlink:href="#icon-zantingtingzhi"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xiayishou"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-bofang1"></use>
      </svg>
    </div>
  </div>
</template>

<script>
import { Vue3Marquee } from "vue3-marquee";
import "vue3-marquee/dist/style.css";
import { mapMutations, mapState } from "vuex";
export default {
  props: ["lyric", "isShow", "play"],
  data() {
    return {
      isLyric: false,
    };
  },
  components: {
    Vue3Marquee,
  },
  mounted() {
    // console.log(this.lyric);
    console.log(this.lyricList.lyric);
  },
  computed: {
    ...mapState(["lyricList"]),
    lyricChange() {
      let arr;
      if (this.lyricList.lyric) {
        arr = this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item) => {
          let min = item.slice(1, 3);
          let sec = item.slice(4, 6);
          let mill = item.slice(7, 10);
          let lrc = item.slice(11, item.length);
          if (isNaN(Number(mill))) {
            mill = item.slice(7, 9);
            lrc = item.slice(10, item.length);
          }
          return { min, sec, mill, lrc };
        });
      }
      console.log(arr);
      return arr;
    },
  },
  methods: {
    goback() {
      this.UODATEDETAIL();
    },
    ...mapMutations(["UODATEDETAIL"]),
  },
};
</script>

<style scoped lang="less">
.bgImg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  filter: blur(70px);
}

.detailTop {
  width: 100%;
  height: 40px;
  display: flex;
  padding-top: 10px;
  justify-content: space-between;
  align-items: center;
  .icon {
    width: 24px;
    height: 24px;
    fill: #fff;
  }
  .detailTopLeft {
    display: flex;
    align-items: center;
    .leftMarquee {
      width: 100px;
      height: 100%;
      margin-left: 15px;
      font-size: 14px;
      color: gray;
      .icon {
        width: 14px;
        height: 14px;
        fill: gray;
      }
    }
  }
}

.detailContent {
  width: 100%;
  height: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .need {
    position: absolute;
    top: 0;
    left: 45%;
    transform: translateX(-50%);
    width: 96px;
    height: 137px;
    transform-origin: 0 0;
    transform: rotate(-10deg);
    transition: all 2s;
    z-index: 2;
  }
  .need_active {
    transform: rotate(10deg);
  }
  .cd {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
  }

  .pic {
    width: 121px;
    height: 121px;
    position: absolute;
    top: 140px;
    border-radius: 50%;
    animation: rotate 2s linear infinite;
  }
  .pic_paused {
    animation-play-state: paused;
  }
}
.detailFooter {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  .footTop {
    display: flex;
    justify-content: space-around;
    .icon {
      width: 28px;
      height: 28px;
    }
  }
  .footContent {
    width: 300px;
    height: 8px;
    margin: 30px auto;
    border-radius: 4px;
    .progress {
      width: 100%;
      height: 100%;
      background-color: red;
      border-radius: 4px;
      position: relative;
      .bgProgress {
        width: 60px;
        height: 100%;
        background-color: green;
        border-radius: 4px;
      }
      .circle {
        width: 8px;
        height: 8px;
        background-color: aqua;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-around;
    height: 50px;
    align-items: center;
    border-top: 1px solid pink;
    .icon {
      width: 28px;
      height: 28px;
      fill: #fff;
      &:nth-child(3) {
        transform: scale(1.6);
      }
    }
  }
}
.lyric {
  margin-top: 4px;
  font-size: 14px;
  text-align: left;
  height: 450px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  overflow-y: hidden;
  overflow: auto;
  color: #fff;
  p {
    margin: 8px 0;
  }
}
.lyric::-webkit-scrollbar {
  display: none;
}

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ((360deg));
  }
}
</style>
